<template>
    <div class="bigbox">
      <img src="http://game.fitedu.net/img/logo2.png" class="xiaohuei" alt="cw">
      <h1 class="wz1">商品商城登录界面</h1>

      <!-- 登录 -->
      <form action="cw" v-if="channel.enroll===false">
        <img class="username" src="../../assets/用户名.png" alt="cw">
        <input type="text" placeholder="请输入用户名" v-model="username">
        <br>
        <br>
        <br>
        <img class="password" src="../../assets/密码.png" alt="cw">
        <input type="password" placeholder="请输入密码" v-model="password">
        
      <van-button type="primary" class="btn" @click="gomine">登录</van-button>
      <van-button type="primary" class="btn" @click="channel.enroll=true,username='',password=''">注册</van-button>
      </form>





      <!-- 注册 -->
      <form action="cw"  v-if="channel.enroll===true">
        <img class="username" src="../../assets/用户名.png" alt="cw">
        <input type="text" placeholder="请输入要注册的用户名" v-model="username">
        <br>
        <br>
        <br>
        <img class="password" src="../../assets/密码.png" alt="cw">
        <input type="password" placeholder="请输入要注册的密码" v-model="password">

      <van-button type="primary" class="btn"  @click="enrolluser" color="linear-gradient(to right, #ff6034, #ee0a24)">注册</van-button>
      <van-button type="primary" class="btn"  @click="channel.enroll=false,username='',password=''">返回登录</van-button>
      </form>


    </div>
  </template> 
  <script setup>
  import router from '@/router';
  import { ref } from 'vue';
  import { showSuccessToast, showFailToast } from 'vant';
    import { useCounterStore } from '../../stores/counter'
    const channel = useCounterStore()


    const username=ref('FIT001')
    const password=ref('123')

    //登录成功跳转页面
  const gomine=()=>{
    //遍历
    channel.userdata.forEach((item,index)=>{
      if(username.value===item.username && password.value===item.password){
        channel.setIsLogin=true
        channel.loginid = index
        router.push('/mine')
     }
    })
    if(channel.setIsLogin===true){
      showSuccessToast('登录成功');
      // 清空数据
      username.value=''
        password.value=''
        
    }else{
      showFailToast('登录失败,检查账号密码是否正确')
      // 清空数据
      username.value=''
        password.value=''
    }

  }

  const enrolluser=()=>{
        if(username.value==="FIT001"){
          showFailToast('该用户名已被注册')
          username.value='',
          password.value=''
          return;
        }
        if(username.value==="FIT002"){
          showFailToast('该用户名已被注册')
          username.value='',
          password.value=''
          return;
        }
    channel.userdata.push({
            id:channel.userdata.length+1,
            username:username.value,
            password:password.value,
            name:'未命名',
            age:20,
            address:'未填写',
            balance:0,
            avatar:'https://ts1.cn.mm.bing.net/th/id/R-C.778fc459e82877eb2c87392a677401df?rik=KS86m2WJEKMTjg&riu=http%3a%2f%2fimg.touxiangwu.com%2f2020%2f3%2fzi63ma.jpg&ehk=BW72oGggmDr4m84FoJZcL2M9ee%2fOQipT1asmlwvIJqA%3d&risl=&pid=ImgRaw&r=0',
            consume:0,
            buy:0,
            browse:0,
            loginsum:0
          })
          showSuccessToast('注册成功')
          // 清空数据
          username.value=''
          password.value=''
  }

  </script>
  
  <style scoped>
    *{
    margin: 0;
    padding: 0;
    }
    
     form{
      display:inline-block;
       width: 98%;
       margin-top: 10%;
     }
     .btn{
       width: 70%;
       height: 40px;
       margin-left: 15%;
       margin-top: 10%

     }
     input{
       width: 60%;
       height: 25px;
       border-radius: 10px;
       margin-top: 10px;
       margin-left: 91px;
     }
     span{
       font-size: 15px;
       margin-left: 10%;
     }
     h1{
      width: 100%;
      text-align: center;
     }
     .bigbox{
      position: relative;
      display: inline-block;
       width: 100%;
       height: 662px;
       background-image: url(../../assets/login.jpg);
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center bottom;
       /* background-color:brown; */
       background-size: 100% 100%;
       margin-bottom: 100px;
     }
     .wz1{
      margin-top: 158px;
      font-size: 25px;
      color:grey;
      font-family:serif;
     }
     .username{
      position: absolute;
    width: 30px;
    height: 30px;
    margin-left: 43px;
    margin-top: 7px;
     }
    .password{
    position: absolute;
    width: 30px;
    height: 30px;
    margin-left: 43px;
    margin-top: 7px;
     }
     .xiaohuei{
      position: absolute;
    width: 358px;
    height: 98px;
    margin-left: 2%;
    margin-top: 12%;
     }
  </style>
  